  <template>
    <div class="common-layout">
      <el-container>
        <el-header>
          <table syle="width:980px;  margin:0 auto; height:90px; border-bottom:1px solid grey;" border="0" >
            <tr>
              <td><hr/></td>
              <td><img src="qqyinyue.jpg" style="width:100%;"></td>
              <td><div style="width:95px; height: 60px; background-color:forestgreen; color: white;padding-top:30px;font-size: 18px;">音乐馆</div></td>
              <td><div style="width:95px; height: 60px; color: black;padding-top:30px; font-size: 18px;">我的音乐</div></td>
              <td><div style="width:95px; height: 60px; color: black;padding-top:30px; font-size: 18px;">客户端</div></td>
              <td><div style="width:95px; height: 60px; color: black;padding-top:30px; font-size: 18px;">开放平台</div></td>
              <td><div style="width:65px; height: 60px; color: black;padding-top:30px; font-size: 18px; padding-top: 36px;">VIP</div></td>
              <td width="54"><input  type="text" value="搜索音乐，MV，歌单，用户"  style="width: 222px; height: 30px; padding-left: 5px; "  />
                <img src="zoom.jpg"  width="32px; height:29px;" style="position: absolute; margin-top:5px;margin-left: -40px; border-color: grey"/>
              </td>
              <td><a href="#"><span style="font-size: 18px; margin-left: 15px;">登录</span></a></td>
              <td>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><el-button type="success">&nbsp;开通VIP&nbsp;</el-button></a></td>
              <td>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><el-button plain>&nbsp;充值&nbsp;</el-button></a>
              </td>
            </tr>
          </table>
          <hr style="color: #a1afc9;  width: 1300px; margin-top: -7px; margin-left: 285px; margin-right: auto;" />
          <el-row :gutter="10" style="width: 900px; height: 30px;margin-left: auto; margin-right: auto ">
            <el-col :span="4">首页</el-col>
            <el-col :span="4">歌手</el-col>
            <el-col :span="4">新碟</el-col>
            <el-col :span="4">排行榜</el-col>
            <el-col :span="4">分类歌单</el-col>
            <el-col :span="4">电台</el-col>
          </el-row>
        </el-header>
        <br/><br/><br/><br/>


        <el-main style="background-color: #fafafa; width: 100%; margin-right: auto; margin-left: auto; margin-top: 35px; text-align: center">
          <div style="margin-left: auto; margin-right: auto;">
            <el-carousel style="width:1300px; margin-left: auto; margin-right: auto;" type="card">
              <el-carousel-item style="height: 300px; width: 745px;"><img src="banner_1.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
              <el-carousel-item><img src="banner_2.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
              <el-carousel-item><img src="banner_3.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
              <el-carousel-item><img src="banner_4.jpg" style="width:100%;height: 100%;" width="745" height="300"></el-carousel-item>
            </el-carousel>
          </div>

          <div style="width: 1300px; margin-left: auto; margin-right: auto">
            <h3 style="text-align: left">最新上架</h3>
          <el-row :gutter="10">
            <el-col :span="4"><img src="gutter-1.jpg" style="width:100%;">
              <table width="210">
                <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                <tr>
                  <td style="text-align: left">¥ 4</td>
                  <td style="text-align: right"><el-button>立刻购买</el-button></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="4"><img src="gutter-2.jpg" style="width:100%;">
              <table width="210">
                <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                <tr>
                  <td style="text-align: left">¥ 4</td>
                  <td style="text-align: right"><el-button>立刻购买</el-button></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="4"><img src="gutter-3.jpg" style="width:100%;">
              <table width="210">
                <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                <tr>
                  <td style="text-align: left">¥ 4</td>
                  <td style="text-align: right"><el-button>立刻购买</el-button></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="4"><img src="gutter-4.jpg" style="width:100%;">
              <table width="210">
                <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                <tr>
                  <td style="text-align: left">¥ 4</td>
                  <td style="text-align: right"><el-button>立刻购买</el-button></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="4"><img src="gutter-5.jpg" style="width:100%;">
              <table width="210">
                <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                <tr>
                  <td style="text-align: left">¥ 4</td>
                  <td style="text-align: right"><el-button>立刻购买</el-button></td>
                </tr>
              </table>
            </el-col>
            <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
              <table width="210">
                <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                <tr>
                  <td style="text-align: left">¥ 4</td>
                  <td style="text-align: right"><el-button>立刻购买</el-button></td>
                </tr>
              </table>
            </el-col>
          </el-row>
          </div>
          <br/>
          <div style="width: 1300px; margin-left: auto; margin-right: auto">
            <h3 style="text-align: left">新声力量集结</h3>
            <el-row :gutter="10">
              <el-col :span="4"><img src="gutter-3.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-2.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-3.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-10.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
            </el-row>
          </div>

          <div style="width: 1300px; margin-left: auto; margin-right: auto">
            <h3 style="text-align: left">内地专辑推荐</h3>
            <el-row :gutter="10">
              <el-col :span="4"><img src="gutter-1.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-8.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-1.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
            </el-row>
          </div>

          <div style="width: 1300px; margin-left: auto; margin-right: auto">
            <h3 style="text-align: left">韩国专辑推荐</h3>
            <el-row :gutter="10">
              <el-col :span="4"><img src="gutter-8.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-9.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col><br/>
              <el-col :span="4"><img src="gutter-5.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-9.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-7.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
            </el-row>
          </div><br/>
          <div style="width: 1300px; margin-left: auto; margin-right: auto">
            <h3 style="text-align: left">影视剧OST推荐</h3>
            <el-row :gutter="10">
              <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-4.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-11.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-4.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-5.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
              <el-col :span="4"><img src="gutter-6.jpg" style="width:100%;">
                <table width="210">
                  <tr><td colspan="2" style="text-align: left">不渝梦</td></tr>
                  <tr><td colspan="2" style="text-align: left">罗云熙</td></tr>
                  <tr>
                    <td style="text-align: left">¥ 4</td>
                    <td style="text-align: right"><el-button>立刻购买</el-button></td>
                  </tr>
                </table>
              </el-col>
            </el-row>
          </div><br/>
        </el-main>

        <el-footer style="background-color: #333333; width: 130%; height: 100%; text-align: left; margin-left:-10px; border:2px solid red;" border="1">
          <table width="1300" height="500" style="color: white;margin-right: auto; margin-left: 260px;" border="0">
            <tr>
              <td v-align="top"  style="text-align: left;vertical-align: top; padding-top: 10px;" >
                <table>
                  <tr><td v-align="top"  style="text-align: left;vertical-align: top;color: #7f7f7f; " >下载QQ音乐客户端</td></tr>
                  <tr><td v-align="top"  style="text-align: left;vertical-align: top;" ><img src="kehuduan.jpg"></td></tr>
                </table>
              </td>
              <td v-align="top" style="text-align: left;vertical-align: top;padding-top: 10px;">
                <table >
                <tr><td style="text-align: left;vertical-align: top;color: #7f7f7f; " v-align="top" >特色产品</td></tr>
                <tr><td style="text-align: left;vertical-align: top;" v-align="top" ><img src="tesechanpin.jpg"></td></tr>
              </table>
              </td>
              <td  style="text-align: left;vertical-align: top;" v-align="top">
                <table border="0"  width="425" style="margin-left: 60px;">
                  <tr><td v-align="top" style="text-align: left;vertical-align: top;padding-top: 10px;color: #7f7f7f; padding-left:-20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合作链接</td></tr>
                  <tr><td>
                    <table>
                      <tr>
                        <td v-align="top" style="text-align: left;vertical-align: top;padding-top: 10px;color: #7f7f7f" height="25">&nbsp;&nbsp;CJ ENM</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;腾讯视频</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;手机QQ空间</td>
                      </tr>
                      <tr>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;最新版QQ</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;腾讯社交广告</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;电脑管家</td>
                      </tr>
                      <tr>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;QQ浏览器</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;腾讯微云</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;腾讯云</td>
                      </tr>
                      <tr>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25" >&nbsp;&nbsp;QQ浏览器</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;腾讯微云</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;腾讯云</td>
                      </tr>
                      <tr>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25"  >&nbsp;&nbsp;酷我音乐</td>
                        <td style="text-align: left;vertical-align: top;color: #7f7f7f" height="25">&nbsp;&nbsp;酷狗听书</td>
                        <td> </td>
                      </tr>
                    </table>
                  </td></tr>
                </table>
              </td>
            </tr>

          </table>

        </el-footer>
      </el-container>
    </div>
  </template>

<script>
export default {
  name: "album_mall"
  // methods: {
  //   handleClick() {
  //     alert('button click');
  //   }
}
</script>

<style scoped>
a {color: #828282; text-line-through-color:white;}
a:visited {color: #9C9C9C;}
a:hover {color: green;}
table {
  margin-left: auto;
  margin-right: auto;
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  /*margin: 0 auto;*/
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  width: 1500px;
  height: 300px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

</style>